<template>
  <div class="my-artist">
    <home-nav :title="'我的歌手(' + subSinger.count + ')'" :more="false"/>
    <ul>
      <li v-for="item in subSinger.data" class="p-2 flex border-b-1">
        <div class="w-20 h-20 pr-2 cursor-pointer" @click="jumpAlbum(item.id)">
          <img style="width: 100%;height: 100%" :src="item.img1v1Url" alt="">
        </div>
        <div class="flex flex-col justify-around">
          <h3 class="m-0 yu-titleColor yu-textColor-hover" @click="jumpAlbum(item.id)">{{item.name}}</h3>
          <div>
            <span class="pr-2">{{item.albumSize}}个专辑</span>
            <span>{{item.mvSize}}个MV</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import HomeNav from '@/components/HomeNav/index.vue'
import {useStore} from "@/store/index";
import {getArtistSublist} from "@/api/singer/index"
import {ref} from "vue";
import {useRouter} from "vue-router";
const store = useStore()
const router = useRouter()
// 存储订阅歌手信息
const subSinger = ref({});
getArtistSublist().then(res => {
  if(Number(res.code) === 200) subSinger.value = res
  console.log(res)
})

// 跳转到专辑
const jumpAlbum = (id) => {
  router.push({
    path: '/artist',
    query: {
      id
    }
  })
}
</script>

<style scoped>

</style>
